<template>
  <div class="menu">
    <a-menu
      :default-selected-keys="opk"
      :default-open-keys="openKey"
      mode="inline"
      theme="light"
      :inline-collapsed="collapsed"
    >
      <template v-for="(item, index) in list">
        <template v-if="!('children' in item)">
          <a-menu-item :key="index" @click="toUrl(item)">
            <a-icon :type="item.icon" />
            <span>{{ item.title }}</span>
          </a-menu-item>
        </template>
        <template v-else>
          <a-sub-menu :key="item.key">
            <span slot="title">
              <a-icon :type="item.icon" />
              <span>{{ item.title }}</span>
            </span>
            <template v-for="v in item.children">
              <template v-if="!('children' in v)">
                <a-menu-item :key="v.key" @click="toUrl(item, v)">
                  <a-icon :type="v.icon" />
                  {{ v.title == "报件箱" ? v.title + `(${count})` : v.title }}
                </a-menu-item>
              </template>
              <template v-else>
                <a-sub-menu :key="v.key">
                  <span slot="title">
                    <a-icon :type="v.icon" />
                    <span>{{ v.title }}</span>
                  </span>
                  <a-menu-item
                    v-for="t in v.children"
                    :key="t.key"
                    @click="toUrl(v, t)"
                  >
                    <a-icon :type="t.icon" /> {{ t.title }}
                  </a-menu-item>
                </a-sub-menu>
              </template>
            </template>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { menu } from "../data/menu.js";
import { number } from "../api/api";
import {  mapState } from "vuex";
export default {
  data() {
    return {
      openKey: [`${localStorage.getItem("path")}`],
      collapsed: false,
      router: true,
      openList: [],
      list: [],
      activeRouter: "",
      isboo: false,
      opk: [`${localStorage.getItem("rt")}`],
      role: JSON.parse(localStorage.getItem("user")),
    };
  },
  computed: {
    ...mapState({
      count: (state) => state.count,
    }),
  },
  async created() {
    setTimeout(() => {
      this.$store.dispatch("fetchData");
    }, 1000);
  
  },
  mounted() {
    //用于刷新菜单
    if (sessionStorage.getItem("create") == 1) {
      sessionStorage.removeItem("create");
      this.$router.go(0);
    }
    this.activeRouter = this.$route.path.split("/")[2];
    this.initRouter();
    this.getmenu();
  },
  methods: {
    toUrl(item, v) {
      localStorage.setItem("rt", v.key);
      if (v.key == "home") {
        localStorage.setItem("path", item.key);
        const userdata = localStorage.getItem("user");
        const obj = JSON.parse(userdata);
        const b = this.$Base64.encode(obj.userid);
        this.$router.push({
          path: "/admin" + "/" + v.key + `?uid=${b}`,
        });
       
      } else {
        if (v == undefined) {
          const breadcrumbList = [item.title];
          this.$store.commit("updateBreadcrumbList", breadcrumbList);
          this.$router.push({
            path: "/admin/" + item.key,
          });
        } else {
          // console.log( v.key, "item");
          localStorage.setItem("path", item.key);
          const breadcrumbList = [item.title, v.title];
          this.$store.commit("updateBreadcrumbList", breadcrumbList);
          this.$router.push({
            path: "/admin/" + v.key,
          });
        }
      }
    },
    initRouter() {
      for (const val of this.$store.state.menudata) {
        for (const val1 of val.children) {
          if (val1.key === this.activeRouter) {
            const breadcrumbList = [val.title, val1.title];
            this.$store.commit("updateBreadcrumbList", breadcrumbList);
          }
        }
      }
    },
    getmenu() {
      const data = this.$store.state.menudata;
      setTimeout(() => {
        const obj = JSON.parse(localStorage.getItem("user"));
        if (obj.role == "sheng") {
          this.list = data;
        } else if (obj.role == "xian") {
          this.list = data.filter((item, index) => index != 0);
        } else if (obj.role == "shi") {
          this.list = data.map((item) => {
            item.children = item.children.filter(
              (child) => child.title !== "报件箱"
            );
            return item;
          });
        }
      }, 1000);
    },
  }
};
</script>

<style lang="less">
.ant-layout-sider-children {
  background: #eff1f7 !important;
}

.logo {
  display: none !important;
}

.ant-menu {
  background: #eff1f7 !important;
}
.menu {
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 32px;
  position: relative;
}

.menu::-webkit-scrollbar {
  display: none;
}
.iconfont {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  display: inline-block;
}
.ant-menu-dark,
.ant-menu-inline,
.ant-menu-sub,
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  box-shadow: none !important;
}
.ant-menu-item,
.ant-menu-item-selected {
  // padding-left: 0px !important;
}
.ant-menu-submenu-title {
  // padding-left: 28px !important;
}
</style>
